<template>
  <div class="main">
    <!-- 顶部bar -->
    <note-main-bar />
    <!--  笔记信息填写卡片  -->
    <note-input-card />
    <!--  分割线  -->
    <el-divider />

    <div class="noteMain">
      <!--   进行笔记的渲染   -->
      <el-row justify="center" style="margin-left: 2%" v-show="showAllNote">
        <el-col v-for="(c,index) in num" :key="index" :span="6" class="card" @click="tiptap">
          <note-show-card :index="index" :data="c" :pageNum="pageNum"/>
        </el-col>
      </el-row>
    </div>

    <!--  分割线  -->
    <el-divider />
    <!--  分页按钮  -->
    <div style="text-align: -webkit-center">
      <el-pagination background layout="prev, pager, next, jumper" v-model:current-page="pageNum" v-model:page-size="pageSize"
                     v-model:total="total" @update:current-page="updatePageNum" :hide-on-single-page="show" style="width: max-content"/>
    </div>
  </div>
</template>

<script setup>
import NoteMainBar from "@/components/Note/NoteMainBar.vue";
import NoteInputCard from "@/components/Note/noteInputCard.vue";
import { ref,onMounted } from "vue";
import NoteShowCard from "@/components/Note/NoteShowCard.vue";
import {setNoteImgAndNoteTitleByUuid} from "@/api/note";

// 渲染卡片数量
let num = ref(0)
// 分页按钮设计
let showAllNote = ref(true) // 是否显示分页按钮
let show = ref(true)
let pageNum = ref(1)
let total = ref(100)
const pageSize = ref(8)

// 页面创建的时候进行调用
onMounted(() => {
  API()
})

function API(){
  // 用户的信息获取
  setNoteImgAndNoteTitleByUuid(pageNum.value,pageSize.value).then((res) => {
    // 得到总数据值
    let data = res.data.data; console.log(data); total.value = data.total
    // 根据总页数来确定，是否显示分页按钮
    if (data.navigateLastPage <= 1){show.value = false}
    // 需要渲染的笔记数量
    num.value = data.list.length

  })
}
// 页面改变的时候进行渲染
function updatePageNum(){API();}

// 点击笔记卡片进入tiptap
function tiptap(){
  console.log("jieshou")
}
</script>

<style scoped>
.main{
  border-radius: 25px;
  padding: 1%;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(0, 0, 0, 0.66);
}
.noteMain{
  width: 98%;
  height: 600px;
  margin-left: 1%;
  border-radius: 15px;
  background-color: rgba(210, 204, 204, 0.96);
}
.showCard{
  width: 20%;
  height: 30%;
  margin-left: 2%;
}
/* 渲染卡片 */
.card{
  margin-top: 1.5%;
}
</style>
